<template>
  <!-- 角色区域 -->
  <van-swipe-cell v-for="(item, index) in roles" :key="index">
    <van-cell :title="item.role_name" :value="item.role_id"></van-cell>
    <template #right>
      <van-button square type="primary" text="编辑" />
      <van-button
        square
        type="danger"
        text="删除"
        @click="deleteRole(item.role_id)"
      />
    </template>
  </van-swipe-cell>
  <p class="margin-5"></p>
  <!-- 分页器 -->
  <van-pagination
    v-model="page"
    :total-items="count"
    :items-per-page="size"
    :show-page-size="4"
    @change="pageChange"
  />
  <p class="margin-5"></p>
  <!-- 新建角色按钮 -->
  <van-button type="primary" size="large" block @click="addRoleShow = true"
    >新建角色</van-button
  >
  <!-- 弹出框 添加用户 -->
  <van-dialog
    v-model:show="addRoleShow"
    title="添加角色"
    :show-confirm-button="false"
  >
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="name"
          name="name"
          label="角色名"
          placeholder="角色名"
          :rules="[{ required: true, message: '请填写角色名' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-row>
          <van-col :span="11">
            <van-button
              round
              block
              plain
              type="primary"
              @click="addRoleShow = false"
              >取消添加</van-button
            >
          </van-col>
          <van-col :span="11" :offset="2">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              @click="handlerAddRole"
            >
              添加角色
            </van-button>
          </van-col>
        </van-row>
      </div>
    </van-form>
  </van-dialog>
</template>
  
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { Tools } from "../../utils/Tools";
const count = ref(0);
const page = ref(1);
const size = ref(10);
const name = ref("");
const roles = ref([]);
const addRoleShow = ref(false);
const { proxy } = getCurrentInstance();

function onSubmit() {}

function getRoles() {
  proxy.$AllRequest.getRoles(page.value, size.value).then((res) => {
    if (res.data.code == 2000) {
      count.value = res.data.count;
      roles.value = res.data.data;
    } else {
      Tools.showMessage("获取角色失败!" + res.data.msg, "danger");
    }
  });
}

function handlerAddRole() {
  proxy.$AllRequest.addRole({ name: name.value }).then((res) => {
    if (res.data.code == 2000) {
      Tools.showMessage("添加成功!");
      addRoleShow.value = false;
      getRoles();
    } else {
      Tools.showMessage(res.data.msg, "warning");
    }
  });
}
function deleteRole(id) {
  proxy.$Dialog.confirm({
    title: "提示",
    message: "可能会出现未知的错误,确定要删除这个角色吗?",
  }).then(() => {
    proxy.$AllRequest.deleteRole({ id }).then((res) => {
      if (res.data.code == 2000) {
        Tools.showMessage("删除成功!");
        addRoleShow.value = false;
        getRoles();
      } else {
        Tools.showMessage(res.data.msg, "warning");
      }
    });
  });
}
function pageChange(_newPage) {
  page.value = _newPage;
  getRoles();
}

onMounted(() => {
  getRoles();
});
</script>

<style scoped>
</style>
